﻿$(document).ready(function () {
    // Proxy created on the fly
    $.connection.clientId = YourId;
    var presentation = $.connection.presentation;
    var canvas = new fabric.Canvas('myCanvas', { selection: false });
    var types = 0;
    var upOrDown = 0; //0 là up
    var count = 0;
    var size = 10;
    var x;
    var y;

    $("#scale-control").change(function (event) {
        size = $("#scale-control").val();
        canvas.renderAll();
    });
    $(".canvasTool").click(function () {
        switch ($(this).val()) {
            case "0":
                btn0_click();
                break;
            case "1":
                btn1_click();
                break;
            case "2":
                btn2_click();
                break;
            case "3":
                btn3_click();
                break;
            case "4":
                btn4_click();
                break;
            case "5": //rec
                Rect_click();
                break;
            case "6": //cir
                Circle_click();
                break;
            case "7": //tria
                Triangle_click();
                break;
            case "8": //clear
                delete_click();
                break;
            case "9": //clear
                canvas.remove(canvas.getActiveObject());
                break;
        }
    });
    function makeCircle(left, top, line1, line2, line3, line4) {
        var c = new fabric.Circle(
        {
            left: left,
            top: top,
            strokeWidth: 5,
            radius: 5,
            fill: 'black',
            stroke: 'black'
        });
        c.hasControls = c.hasBorders = false;
        c.line1 = line1;
        c.line2 = line2;
        c.line3 = line3;
        c.line4 = line4;

        return c;
    }
    function btn0_click() {
        if (types != 1) {
            canvas.remove(line);
            types = 0;
            count = 0;
        }
        else {

            if (count == 1) {
                canvas.remove(line);
                canvas.remove(circle);
            }
            types = 0;
            count = 0;
        }
    }
    function btn1_click() {
        types = 1;
        count = 0;
    }
    function btn2_click() {
        types = 2;
        count = 0;
    }
    function btn3_click() {
        types = 3;
        count = 0;
    }
    function btn4_click() {
        types = 4;
        count = 0;
    }
    function delete_click() {
        canvas.clear();
    }
    function Rect_click() {
        canvas.add(new fabric.Rect({
            width: $("#scale-control").val() * 10,
            height: $("#scale-control").val() * 10,
            left: 50,
            top: 50,
            stroke: $("#linecolor").val(),
            strokeWidth: 2,
            fill: 'white',
            opacity: $("#Opacity").val()
        }));
    }
    function Circle_click() {
        canvas.add(new fabric.Circle({
            radius: $("#scale-control").val() * 5,
            left: 50,
            top: 50,
            stroke: $("#linecolor").val(),
            strokeWidth: 2,
            fill: 'white',
            opacity: $("#Opacity").val()
        }));
    }
    function Triangle_click() {
        canvas.add(new fabric.Triangle({
            left: 50,
            top: 50,
            stroke: $("#linecolor").val(),
            strokeWidth: 2,
            fill: 'white',
            opacity: $("#Opacity").val(),
            width: $("#scale-control").val() * 10,
            height: $("#scale-control").val() * 10
        }));
    }
    function makeLine(coords) {
        return new fabric.Line(coords,
		    {
		        fill: $("#linecolor").val(),
		        strokeWidth: size,
		        selectable: true,
		        opacity: $("#Opacity").val()
		    });
    }
    var line;
    var circle;
    $("#d").mousedown(function (event) {
        if (types == 4) {
            upOrDown = 1; //1 down
            x = event.offsetX;
            y = event.offsetY;
        }
    });
    $("#d").mouseup(function (event) {
        if (types == 4) {
            upOrDown = 0; //0 up
            UpdateCanvas();
        }
    });
    $("#d").mousemove(function (event) {
        if (types == 4) {
            if (upOrDown == 1) {
                var x1 = event.offsetX;
                var y1 = event.offsetY;
                canvas.renderAll();
                if (Math.abs(x1 - x) > 10 || Math.abs(y1 - y) > 10) {
                    var line1 = makeLine([x, y, x1, y1]);
                    line1.strokeWidth = $("#scale-control").val() * (1 / 4);
                    canvas.add(line1);
                    x = x1;
                    y = y1;
                }
            }
        }
        if (types == 1) {
            if (count == 1) {
                line.set({ 'x2': event.offsetX, 'y2': event.offsetY });
                canvas.renderAll();
            }
        }
        if (types == 2 || types == 3) {
            if (count == 1) {
                line.set({ 'x2': event.offsetX, 'y2': event.offsetY });
                canvas.renderAll();
            }
        }

    });
    $("#d").click(function (event) {
        if (types == 1) {
            if (count == 0) {
                count = 1;
                x = event.offsetX;
                y = event.offsetY
                circle = makeCircle(x, y);
                line = makeLine([x, y, event.offsetX, event.offsetY]);
                canvas.add(line);
                canvas.add(circle);
            }
            else {
                count = 0;
                circle.line1 = null;
                circle.line2 = line;
                circle1 = makeCircle(line.get('x2'), line.get('y2'), line);
                canvas.add(circle1);
                canvas.observe('object:moving', function (e) {
                    var p = e.memo.target;
                    p.line1 && p.line1.set({ 'x2': p.left, 'y2': p.top });
                    p.line2 && p.line2.set({ 'x1': p.left, 'y1': p.top });
                    p.line3 && p.line3.set({ 'x1': p.left, 'y1': p.top });
                    p.line4 && p.line4.set({ 'x1': p.left, 'y1': p.top });
                    canvas.renderAll();
                });
                UpdateCanvas();
            }
        }
        if (types == 2) {
            if (count == 0) {
                count = 1;
                x = event.offsetX;
                y = event.offsetY
                circle = makeCircle(x, y);
                line = makeLine([x, y, event.offsetX, event.offsetY]);
                canvas.add(line);
                canvas.add(circle);
                circle.line1 = null;
                circle.line2 = line;
            }
            else {
                circle = makeCircle(line.get('x2'), line.get('y2'), line);
                circle.line1 = line;
                line = makeLine([line.get('x2'), line.get('y2'), event.offsetX, event.offsetY]);
                canvas.add(line);
                canvas.add(circle);
                circle.line2 = line;
                canvas.observe('object:moving', function (e) {
                    var p = e.memo.target;
                    p.line1 && p.line1.set({ 'x2': p.left, 'y2': p.top });
                    p.line2 && p.line2.set({ 'x1': p.left, 'y1': p.top });
                    p.line3 && p.line3.set({ 'x1': p.left, 'y1': p.top });
                    p.line4 && p.line4.set({ 'x1': p.left, 'y1': p.top });
                    canvas.renderAll();
                });
                UpdateCanvas();
            }
        }
        if (types == 3) {
            if (count == 0) {
                count = 1;
                x = event.offsetX;
                y = event.offsetY
                circle = makeCircle(x, y);
                canvas.add(circle);
                line = makeLine([x, y, event.offsetX, event.offsetY]);
                canvas.add(line);

            }
            else {
                line = makeLine([x, y, event.offsetX, event.offsetY]);
                canvas.add(line);
                circle = makeCircle(line.get('x2'), line.get('y2'), null, line);
                canvas.add(circle);


                canvas.observe('object:moving', function (e) {
                    var p = e.memo.target;
                    p.line1 && p.line1.set({ 'x2': p.left, 'y2': p.top });
                    p.line2 && p.line2.set({ 'x1': p.left, 'y1': p.top });
                    p.line3 && p.line3.set({ 'x1': p.left, 'y1': p.top });
                    p.line4 && p.line4.set({ 'x1': p.left, 'y1': p.top });
                    canvas.renderAll();
                });
                UpdateCanvas();
            }
        }
    });
    // Declare a function on the presentation hub so the server can invoke it
    presentation.addMessage = function (message) {
        if (message.type == 1) {
            canvas.loadFromJSON(message.data);
        } else if (message.type == 2) {
            $("#messages").append("<div>" + message.data + "</div>");
        } else if (message.type == 3) {
            $("#notices").append("<div>" + message.data + "</div>");
        }
    };
    $.connection.hub.start({ transport: ['webSockets', 'longPolling'] }, function () {
        presentation.join(GroupId).done(function () {
            presentation.GroupId = GroupId;
        });
    });
    $(window).bind("beforeunload", function () { presentation.leave(); return "Do you really want to close?"; });
    $("#broadcast").click(function () {
        UpdateChat($("#msg").val());
        $("#msg").val("")
    });

    $("#disconnect").click(function () {
        presentation.leave().done(function () {
            console.log('Success!')
        }).fail(function (e) {
            console.warn(e);
        });
        window.location = "/Canvas/";
    });

    function UpdateCanvas() {
        var mess = new Object();
        mess.type = 1;
        mess.data = JSON.stringify(canvas.toJSON());
        presentation.send(JSON.stringify(mess)).done(function () {
            console.log('Success!')
        }).fail(function (e) {
            console.warn(e);
        });
    }
    function UpdateChat(message) {
        var mess = new Object();
        mess.type = 2;
        mess.data = message;
        presentation.send(JSON.stringify(mess)).done(function () {
            console.log('Success!')
        }).fail(function (e) {
            console.warn(e);
        });
    }
    function UpdateOnline() {
        var mess = new Object();
        mess.type = 3;
        mess.data = JSON.stringify(canvas.toJSON());
        presentation.send(JSON.stringify(mess)).done(function () {
            console.log('Success!')
        }).fail(function (e) {
            console.warn(e);
        });
    }
});